<!DOCTYPE html>
<html>
<head>
    <title>Working With Different Data Types</title>
    <style>
    #content {
    	padding: 5pt;
    	border: 2px dashed lightgray;
    }
    </style>
    <script type="text/javascript" src="../jquery-1.9.1.js"></script>
    <script type="text/javascript">
      $("document").ready(function() {
        getJSONData();
        //getXMLData();
      });
      
	  function getJSONData() {
		var flickrAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
		$.getJSON( flickrAPI, {
			tags: "space needle",
			tagmode: "any",
			format: "json"
			},
			successFn);
      }
      
      function getXMLData() {
      	$.get("testxmldata.xml", function(result) {
      		var title = result.getElementsByTagName("title")[0];
      		var name = result.getElementsByTagName("name")[0];
      		var val = title.firstChild.nodeValue + " by " + name.firstChild.nodeValue;
      		$("#content").append(val);
      	});
      }
      
      function successFn(result) {
		$.each(result.items, function(i, item) {
			$("<img>").attr("src", item.media.m).appendTo("#content");
			if (i === 4) {
				return false;
			}
		});
      }
      function errorFn(xhr, status, strErr) {
        alert(strErr);
      }
  </script>
</head>
<body>
<h1>Working With Different Data Types</h1>
<div id="content"></div>
</body>
</html>
